<!--热门书单-->
<template>
  <div class="home">
    <div class="hotBookList">
      <h2>热门书单</h2>
      <ul>
        <li class="clearfix">
          <a href=""><img src="../../../../static/img/monthly/shudan_cx.jpg" alt=""></a>
          <h3>一诺十年静待花期</h3>
          <p>《一路繁花相送》钟汉良、江疏影组繁花CP，掀清新治愈风。花相送》钟汉良、江疏影组繁花CP，掀清新治愈风。</p>
        </li>
        <li class="clearfix">
          <a href=""><img src="../../../../static/img/monthly/shudan_jx.jpg" alt=""></a>
          <h3>点击超千万的完本免费小说</h3>
          <p>神书推荐，不服来辩</p>
        </li>
        <li class="clearfix">
          <a href=""><img src="../../../../static/img/monthly/shudan001 (9).jpg" alt=""></a>
          <h3>霸道总裁合集</h3>
          <p>我爱霸道总裁</p>
        </li>
      </ul>
    </div>

  </div>
</template>
<script>
  export default {
    data () {
      return {
        msg: '13213'
      }
    }
  }
</script>


<style>
  .hotBookList{
    margin-bottom: 14px;
    background: #fff;

  }
  .hotBookList h2{
    height: 50.39px;
    text-align: left;
    line-height: 50.39px;
    font-size: 16px;
    font-weight: normal;
    color:#333;
    padding-left:14px;
  }
  .hotBookList ul li{
    padding:14px 14px;
    border-bottom:1px solid #ececec;
  }
  .hotBookList ul li img{
    width: 70px;
    margin-right: 16.8px;
    float: left;
  }
  .hotBookList ul li h3{
    font-weight: normal;
    color:#333;
    font-size: 16.8px;
    margin-bottom: 12px;
  }
  .hotBookList ul li p{
    font-size: 14px;
    color: #6D6D6D;
    height: 38px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
</style>
